<template>
  <div class="auth-container">
    <h1 style="text-align: center">登录注册页面</h1>

    <!-- 登录表单 -->
    <div class="form-section">
      <h2>登录</h2>
      <form @submit.prevent="login" style="max-width: 300px; margin: 0 auto">
        <div class="form-group">
          <label for="username">用户名:</label>
          <input type="text" id="username" v-model.trim="username" required />
        </div>
        <div class="form-group">
          <label for="password">密码:</label>
          <input
            type="password"
            id="password"
            v-model.trim="password"
            required
            minlength="6"
          />
        </div>
        <div v-if="loginError" class="error-message">{{ loginError }}</div>
        <button type="submit" class="submit-btn">登录</button>
      </form>
    </div>

    <!-- 注册表单 -->
    <div class="form-section">
      <h2>注册</h2>
      <form
        @submit.prevent="register"
        style="max-width: 300px; margin: 20px auto"
      >
        <div class="form-group">
          <label for="newUsername">新用户名:</label>
          <input
            type="text"
            id="newUsername"
            v-model.trim="newUsername"
            required
          />
        </div>
        <div class="form-group">
          <label for="newPassword">新密码:</label>
          <input
            type="password"
            id="newPassword"
            v-model.trim="newPassword"
            required
            minlength="6"
          />
        </div>
        <div v-if="registerError" class="error-message">
          {{ registerError }}
        </div>
        <button type="submit" class="submit-btn">注册</button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const username = ref("");
const password = ref("");
const newUsername = ref("");
const newPassword = ref("");
const loginError = ref("");
const registerError = ref("");

const validateLogin = () => {
  if (!username.value || !password.value) {
    loginError.value = "用户名和密码不能为空";
    return false;
  }
  if (password.value.length < 6) {
    loginError.value = "密码长度不能少于6位";
    return false;
  }
  return true;
};

const login = () => {
  loginError.value = "";
  if (validateLogin()) {
    console.log("登录:", username.value, password.value);
    // 这里可以添加API请求
  }
};

const validateRegister = () => {
  if (!newUsername.value || !newPassword.value) {
    registerError.value = "用户名和密码不能为空";
    return false;
  }
  if (newPassword.value.length < 6) {
    registerError.value = "密码长度不能少于6位";
    return false;
  }
  return true;
};

const register = () => {
  registerError.value = "";
  if (validateRegister()) {
    console.log("注册:", newUsername.value, newPassword.value);
    // 这里可以添加API请求
  }
};
</script>

<style scoped>
.auth-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.form-section {
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.error-message {
  color: #dc3545;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}
</style>
